<template>
  <div>
     <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
     </el-breadcrumb>
     <div class="content">
     <heading grade="1">{{pathName}}</heading>
     <el-form ref="form" v-bind="getFormProps()">
         <el-form-item  label="职务名称："
            prop="positionName"
             :rules="[
               { required: true, message: '职务名称不能为空'},
               { min: 1, max: 16, message: '职务名称不得超过16个字符'}
             ]">
            <el-input class="normal-input" v-model.trim="form.positionName" placeholder="请输入职务名称" v-focus></el-input>
         </el-form-item>
         <el-form-item  label="职务权限编辑："
            prop="checkedPermission"
             :rules="[
               { required: true, message: '职务权限不能为空'},
             ]">
            <el-checkbox-group class="fl check-group clearfix" v-model="form.checkedPermission">
              <el-checkbox v-for="item in employee_ip_rest_list" :label="item.serviceCode" :key="item.id">{{item.serviceName}}</el-checkbox>
            </el-checkbox-group>              
         </el-form-item>
         <div class="button-box">
          <el-form-item>
            <el-button type="primary" native-type="submit" :loading="loading">新建职务</el-button>
          </el-form-item>
         </div>
     </el-form>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import api from 'api/employee'
import {form} from 'utils/mixins'
export default {
  mixins: [form],
  data () {
    return {
      loading: false,
      pathName: '新建职务',
      form: {
        positionName: '',
        checkedPermission: []
      }
    }
  },
  computed: {
    ...mapGetters({
      employee_ip_rest_list: 'employee_ip_rest_list'
    })
  },
  mounted () {
    this.$store.dispatch('employee_ip_rest_list')
  },
  methods: {
    submit (formName) {
      api.position({  // 新建职务接口
        roleName: this.form.positionName,
        roleType: 1,
        list: this.form.checkedPermission
      }, {context: this, successMsg: '添加成功'}).then(res => {
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.normal-input {
  width: 290px
}
</style>
